<template>
    <div class="user-list">
        <h3>用户列表</h3>
        <!-- :data="filterTableData" -->
        <el-table :data="tableData" style="width: 100%">
            <!-- <el-table-column label="日期" prop="date" /> -->
            <el-table-column label="昵称" prop="user_name" />
            <el-table-column label="邮箱" prop="user_email" />
            <el-table-column label="手机" prop="user_phone" />
            <el-table-column label="年龄" prop="user_age" />
            <el-table-column label="地址" prop="user_addr" />

            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索" style="height: 30px;font-size: 13px;" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="success" @click="handleDelete(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref, type Ref } from 'vue'
import { userList } from '../../api/request'

// 定义接口，形容对象的结构
interface User {
    date: string
    user_name: string
    user_email: string
    user_phone: string
    user_age: number
    user_addr: string
    user_imgUrl: string
    id?: number | string
}

const search = ref('')
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}

// 用户列表数据
const tableData = ref<User[]>([]); // 创建一个 Ref 对象


// 定义函数获取用户列表
const userListFn = async (page = 1, pageSize = 18) => {
    await userList({ page, pageSize }).then(
        content => {
            console.log(content)
            let { code, total, result } = content;
            if (code == 200) {
                tableData.value = result; // 更新为使用 value 属性

            }
        }
    )
}

// 
userListFn();

</script>

<style lang="scss">
.user-list {
    h3 {
        margin-bottom: 15px;
    }

    .el-table__header {
        height: 50px;
        .cell{
            font-size: 16px;
        }
    }
}
</style>